<template>
    <div>
        <router-view></router-view>
        <el-col class="home_right">
            <div class="home_topbar"></div>
            <div style="margin: 10px;">欢迎光临:管理员</div>
            <el-col style="width:100%; margin: 0 10px;">
                <el-row :gutter="20">

                    <el-col :xs="12"  :sm="12" :md="12" :lg="6" :xl="6" class="home_topbar_item">
                        <div class="">
                            <div style="display:inline-block"><i class="el-icon-s-order"></i></div>
                            <div style="display:inline-block">
                                <div>累计订单</div>
                                <div class="number">12</div>
                            </div>
                        </div>
                    </el-col>

                    <el-col :xs="12"  :sm="12" :md="12" :lg="6" :xl="6" class="home_topbar_item">
                        <div class="">
                            <div style="display:inline-block"><i class="el-icon-s-custom"></i></div>
                            <div style="display:inline-block">
                                <div>累计用户</div>
                                <div class="number">8</div>
                            </div>
                        </div>
                    </el-col>

                    <el-col :xs="12"  :sm="12" :md="12" :lg="6" :xl="6" class="home_topbar_item">
                        <div class="">
                            <div style="display:inline-block"><i class="el-icon-shopping-cart-1"></i></div>
                            <div style="display:inline-block">
                                <div>加购物车</div>
                                <div class="number">4</div>
                            </div>
                        </div>
                    </el-col>

                    <el-col :xs="12"  :sm="12" :md="12" :lg="6" :xl="6" class="home_topbar_item">
                        <div class="">
                            <div style="display:inline-block"><i class="el-icon-data-line"></i></div>
                            <div style="display:inline-block">
                                <div>累计收入</div>
                                <div class="number">5w</div>
                            </div>
                        </div>
                    </el-col>

                </el-row>
            </el-col>
            <el-col>
                <div ref="chart1" class="home_chart1" style="width:calc(100% - 40px);height:376px"></div>
            </el-col>
            <el-col>
                <div class="home_chart2_total">
                    <div class="home_chart2_rank">
                        <div class="items" v-for="(item, index) of rankData" :key="index">
                            <span class="home_chart2_rank_item">{{ item }}</span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div ref="chart" class="home_chart2" style="width:calc(50% - 20px);height:360px"></div>
                </div>
            </el-col>
            <el-col>
                <div class="home_chart3_total">
                    <div ref="chart2" class="home_chart3"
                        style="width:calc(50% - 10px);height:350px;padding-top: 20px;"></div>
                    <div style="width:calc(50% - 20px)">
                        <el-table class="home_chart3_form" :data="tableData" style="width: 100%;">
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址"> </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-col>
    </div>
</template>
<script>
// import echarts from "echarts";
export default {
    name: "dashboard",
    mounted() {
        let _self = this;
        console.log(_self.$route);
        // query传参
        // 下一个页面接参
        console.log(_self.$route.query.Lname);
        console.log(_self.$route.query.Bname);
        _self.getEchartData1();
        _self.getEchartData();
        _self.getEchartData2();
    },
    data() {
        return {
            rankData: [
                "2019双11AII in cloud低至一折",
                "主机爆款限时优惠",
                "企业级云服务器五折优惠",
                "全民云计算云主机低至4折",
                "商标注册服务低至8折",
                "云短信产品低至8折"
            ],
            activeIndex: "1",
            activeIndex2: "1",
            charts: "",
            opinionData: ["3", "2", "4", "4", "5"],
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ],
            multipleSelection: [],
            leftMenuList: [
                {
                    indexPath: "1",
                    name0: "流程管理",
                    classIcon: "el-icon-location",
                    classify1: ["流程部署管理", "流程定义管理"]
                },
                {
                    indexPath: "2",
                    classIcon: "el-icon-menu",
                    name0: "辅助功能",
                    classify1: [
                        "配置管理",
                        "流程定义管理",
                        "用户管理",
                        "部门&组 管理",
                        "安装位置管理",
                        "机型管理",
                        "水源管理",
                        "故障管理",
                        "分店管理"
                    ]
                },
                {
                    indexPath: "3",
                    classIcon: "el-icon-document",
                    name0: "查询功能",
                    classify1: ["销售查询", "我的店铺销售查询"]
                },
                {
                    indexPath: "4",
                    classIcon: "el-icon-setting",
                    name0: "所有权限",
                    classify1: [
                        "查看所有店铺全部的权限",
                        "查看我的店铺销售权限",
                        "关闭任务权限"
                    ]
                }
            ]
        };
    },
    methods: {
        getEchartData() {
            const chart = this.$refs.chart;
            if (chart) {
                const myChart = this.$echarts.init(chart);
                const option = {
                    color: ['#c23531'],
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ["周一", 120],
                            ["周二", 200],
                            ["周三", 150],
                            ["周四", 80],
                            ["周五", 70],
                            ["周六", 110],
                            ["周日", 130]
                        ]
                    },
                    xAxis: { type: "category" },
                    yAxis: {
                        type: 'value',
                        show: true,
                        axisTick: {
                            //y轴刻度线
                            show: true
                        },
                        axisLine: {
                            //y轴线
                            show: true, lineStyle: {
                                color: '#000' // 颜色
                            }
                        },
                    },

                    series: [{ type: "bar" }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
            this.$on("hook:destroyed", () => {
                window.removeEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
        getEchartData1() {
            const chart1 = this.$refs.chart1;
            if (chart1) {
                const myChart = this.$echarts.init(chart1);
                const option = {
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: [
                            "周一",
                            "周二",
                            "周三",
                            "周四",
                            "周五",
                            "周六",
                            "周日"
                        ]
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: "邮件营销",
                            type: "line",
                            stack: "Total",
                            data: [
                                120,
                                132,
                                101,
                                134,
                                90,
                                230,
                                210,
                                120,
                                132,
                                101,
                                134,
                                90,
                                230
                            ]
                        },
                        {
                            name: "联盟广告",
                            type: "line",
                            stack: "Total",
                            data: [
                                220,
                                182,
                                191,
                                234,
                                290,
                                330,
                                310,
                                220,
                                182,
                                191,
                                234,
                                290,
                                330
                            ]
                        },
                        {
                            name: "视频广告",
                            type: "line",
                            stack: "Total",
                            data: [
                                150,
                                232,
                                201,
                                154,
                                190,
                                330,
                                410,
                                150,
                                232,
                                201,
                                154,
                                190,
                                330
                            ]
                        },
                        {
                            name: "直接访问",
                            type: "line",
                            stack: "Total",
                            data: [
                                320,
                                332,
                                301,
                                334,
                                390,
                                330,
                                320,
                                320,
                                332,
                                301,
                                334,
                                390,
                                330
                            ]
                        },
                        {
                            name: "搜索引擎",
                            type: "line",
                            stack: "Total",
                            data: [
                                820,
                                932,
                                901,
                                934,
                                1290,
                                1330,
                                1320,
                                820,
                                932,
                                901,
                                934,
                                1290,
                                1330
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
            this.$on("hook:destroyed", () => {
                window.removeEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
        getEchartData2() {
            const chart2 = this.$refs.chart2;
            if (chart2) {
                const myChart = this.$echarts.init(chart2);
                const option = {
                    title: {
                        text: "用户来源",
                        subtext: "纯属虚构",
                        left: "center"
                    },
                    tooltip: {
                        trigger: "item"
                    },
                    legend: {
                        orient: "vertical",
                        left: "left"
                    },
                    series: [
                        {
                            name: "Access From",
                            type: "pie",
                            radius: "50%",
                            data: [
                                { value: 1048, name: "搜索引擎" },
                                { value: 735, name: "直接访问" },
                                { value: 580, name: "邮件营销" },
                                { value: 484, name: "联盟广告" },
                                { value: 300, name: "视频广告" }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
            this.$on("hook:destroyed", () => {
                window.removeEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
};
</script>
<style>
.home_right {
    /* position: absolute; */
    overflow: hidden;
}

.home_topbar_item {
    padding: 10px 5px 10px 5px;
    min-width: 150px;
}

.home_topbar_item>div {
    box-shadow: 5px 5px 20px 1px #9b9c9e;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home_topbar_item>div>div:nth-child(1)>i {
    font-size: 90px;
    color: #34BFA3;
    margin-right: 15px;
}

.home_topbar_item>div>div:nth-child(2)>div:nth-child(1) {
    font-size: 20px;
    color: gray;
}

.home_topbar_item>div>div:nth-child(2)>div:nth-child(2) {
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.home_chart1 {
    background-color: white;
    box-shadow: 5px 5px 20px 1px #9b9c9e;
    margin: 10px;
}

.home_chart2_total {
    margin: 10px 10px -15px 10px;
}

.home_chart2_rank {
    position: relative;
    top: -37px;
    margin-right: 5px;
    background-color: white;
    width: calc(50% - 10px);
    box-shadow: 5px 5px 20px 1px #9b9c9e;
    padding: 15px 0;
}

.home_chart2_rank>.items {
    margin: 0 20px;
    line-height: 54px;
    height: 54px;
    border-bottom: 1px solid gainsboro;
    position: relative;
}

.home_chart2_rank_item {
    font-size: 12px;
}

.home_chart2_rank i {
    position: absolute;
    right: 0;
    top: 20px;
}

.home_chart2 {
    width: calc(80% - 300px);
    background-color: white;
    box-shadow: 5px 5px 20px 1px #9b9c9e;

}

.home_chart2_total>div {
    display: inline-block;
}

.home_chart3 {
    position: relative;
    /* top: -1px; */
    background-color: white;
    box-shadow: 5px 5px 20px 1px #9b9c9e;
    margin-right: 5px;
}

.home_chart3_form {
    overflow: scroll;
    height: 370px;
    width: 42%;
    box-shadow: 5px 5px 20px 1px #9b9c9e;

}

.home_chart3_total {
    margin: 0 10px;
}

.home_chart3_total>div {
    display: inline-block;
}
</style>
